<template>
	<view class="page-item-info">
		<!-- 头部导航 -->
		<view class="item-info">
			<view class="item-info-v">
				<image @click="backClick" class="test1" src="../../static/search-img/左箭头.png"></image>
				<text>领{{ itemObj.coupon_amount }}元卷,卷后{{ itemObj | goodsAfter }}.00元</text>
				<image class="test1" src="../../static/home/conent/列表选择.png"></image>
			</view>
		</view>
		<!-- 设置详细内容 -->
		<view class="item-info-content">
			<view class="i-info-cont"><image :src="itemObj.pict_url" mode=""></image></view>
			<view class="i-info-titele">
				<text style="color:#ffffff;border:2rpx solid #c20000;padding:-2rpx;margin-right:10rpx;padding-top:0px;border-radius:6rpx;background:#c20000;font-size:24rpx;">
					淘宝
				</text>
				<text style="color:#ffffff;border:2rpx solid #c20000;padding:-2rpx;margin-right:10rpx;padding-top:0px;border-radius:6rpx;background:#c20000;font-size:24rpx;">
					包邮
				</text>
				<text>{{ itemObj.title }}</text>
			</view>
			<view class="i-info-price">
				<text>卷后价￥{{ itemObj | goodsAfter }}.00元</text>
				<text>原价￥{{ itemObj.coupon_start_fee }}元</text>
			</view>

			<view class="i-info-miduile">
				先领卷再下单 ,此商品可以省
				<text>{{ itemObj.coupon_amount }}</text>
				元
			</view>
			<!-- 以下是测试 截图功能 -->
			<!-- 			<view id="capture" style="padding: 10px; background: #f5da55"><text style="color: #000; ">Hello world!</text></view>
			<view>
				<text>{{ itemObj.coupon_amount }}</text>

				<text></text>
				<!<image  :src="itemObj.pict_url" mode=""></image> -->
			<!-- 	<image style="width: 50px; height: 50px;" src="../../static/wyg-bottom-tab/img/icon_03.png" mode=""></image>
			</view> -->

			<!-- 推荐理由 -->
			<view class="i-info-recommend">
				<view class="i-info-recoOne">
					<text>推荐理由</text>
					<text>{{ itemObj.item_description || '。。。' }}</text>
				</view>
				<view class="i-info-recoTwo">
					<text>精挑细选</text>
					<view class="">
						<view class="">
							<text style="background: url(https://m.haoshsh.com/static/jwap/images/better_change.png) no-repeat;"></text>
							<text>新品特价</text>
						</view>
						<view class="">
							<text style="background: url(https://m.haoshsh.com/static/jwap/images/better_change.png) no-repeat;     background-position: -66rpx 0;"></text>
							<text>限时特卖</text>
						</view>
						<view class="">
							<text style="background: url(https://m.haoshsh.com/static/jwap/images/better_change.png) no-repeat;     background-position: -146rpx 0;"></text>
							<text>诚信品牌</text>
						</view>
						<view class="">
							<text style="background: url(https://m.haoshsh.com/static/jwap/images/better_change.png) no-repeat;     background-position: -222rpx 0;"></text>
							<text>人气推荐</text>
						</view>
						<view class="">
							<text style="background: url(https://m.haoshsh.com/static/jwap/images/better_change.png) no-repeat;     background-position: -296rpx 0;"></text>
							<text>全国包邮</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 选项 -->
			<view class="com-tabs-price">
				<view :class="topOptThat ? 'opt-style-price' : ''" @click="topClcikChangeEvent(1)"><text>同类热门推荐</text></view>
				<view :class="!topOptThat ? 'opt-style-price' : ''" @click="topClcikChangeEvent(0)"><text>查看图文详情</text></view>
			</view>
			<!-- 展示同款或者展示图集 -->
			<view class="com-tabs-showShinee" v-show="topOptThat">
				<!-- 商品列表组件 -->
				<view class=""><goodsitem :goodesList="similarityData" :isInfoShow="false"></goodsitem></view>
			</view>
			<view class="com-tabs-showImg" v-show="!topOptThat">
				<view class="" v-for="(i, idx) in itemObj.small_images.string" :key="idx"><image class="com-tabs-infoImg" :src="i" mode=""></image></view>
			</view>
		</view>

		<!-- 底部copyright -->
		<view class="item-info-footerCopyright"><text>copyright © 爽淘淘</text></view>
		<!-- 底部 -->
		<view class="com-tab-footer"></view>
		<!-- 底部tabbar -->
		<view class="i-info-tabbr">
			<view class="i-info-tabb-child">
				<view @click="goHomeClickEvent">
					<image src="../../static/home/tab-home.png" mode=""></image>
					<text>首页</text>
				</view>
				<view class="" @click="showTextClickEvent">
					<image src="../../static/item-info/分享.png" mode=""></image>
					<text>文案</text>
				</view>
				<view class="" @click="showImgClickEvent">
					<image src="../../static/item-info/分享.png" mode=""></image>
					<text>图片</text>
				</view>
				<view class="i-info-a"><a :href="itemObj.coupon_click_url">直接领卷购买</a></view>
				<view class="" @click="showTextClickEvent">淘口令领取</view>
			</view>
		</view>
		<!-- 显示文字 -->
		<view class="item-info-popup" v-if="isShowText">
			<view class="i-i-p-text">
				<view class="i-i-p-textHeader">
					<text>复制下方淘口令分享给好友</text>

					<image src="../../static/item-info/叉号%20(1).png" @click="closeTextClickEvent" mode=""></image>
				</view>
				<view class="i-i-p-textBody" ref="copyText">
					<text>[爽淘淘] {{ itemObj.title }}</text>
					<text>{{ itemTaoKouLing }}</text>
				</view>
				<view class="i-i-p-textDisc">
					<text>可领 ￥ {{ itemObj.coupon_amount }}券</text>
					<text>温馨提示1：手机无【手机淘宝】者，可选择浏览器购买方式哦！</text>
					<text>温馨提示2、请尽快领券并下单，避免优惠券抢完、失效或涨价！</text>
				</view>
				<view :class="isCopy ? 'btn-color i-i-p-textBtn' : 'i-i-p-textBtn'" @click="copyTextClickEvent">
					<text v-show="!isCopy">一键复制</text>
					<text v-show="isCopy">复制成功,请打开手机淘宝</text>
				</view>
			</view>
		</view>

		<!-- 显示图片分享 -->
		<view class="item-info-imgup" v-show="isShowImg">
			<!-- 内部包裹 -->
			<view class="shareimg"  id="showImgParent">
			</view>
			<view id="test" class="item-info-imgup-img" v-show="isSharImg">
				<!-- 设置头部 -->
				<view class="imgup-img-header">
					<view class="">{{ itemObj.title }}</view>
				</view>
				<!-- 设置中间图片部分 -->
				<!-- <view class="imgup-img-img"><image :src="itemObj.pict_url" mode=""></image></view> -->

				<view class="imgup-img-img"><image :src="this.testImg" mode=""></image></view>
				<!-- 设置底部 -->
				<view class="imgup-img-bootom">
					<view class="">
						<view class="image-img-bootom-left">
							<view class="">￥ {{ itemObj | goodsAfter }} 券后价</view>
							<view class="">
								<text>券</text>
								<text>￥{{ itemObj.coupon_amount }} 元</text>
							</view>
							<view class="">长按右侧二维码领券购买</view>
						</view>
						<view class="imgup-img-bootom-right"><image ref="testimg2" onload="testEvent" @onload="testEvent" :src="QRcode"></image></view>
					</view>
				</view>
			</view>
			<!-- 设置外卖包裹部分 -->
			<view class="item-info-imgup-outer">
				<image src="../../static/item-info/差号.png" @click="closeImgClickEvnet" mode=""></image>
				<text>11</text>
			</view>
		</view>
		<!-- 点击向上 -->
		<view><click-up v-show="isTopEvent"></click-up></view>
	</view>
</template>

<script>
//引入点击向上组件
import clickUp from '../../components/click-up/click-up.vue';

//商品item组件
import goodsitem from '../../components/goods-item/goodsItem.vue';

//引入二维码生成工具
import QR from '../../tools/wxqrcode.js';

//引入canvas生成工具
import html2canvas from '../../tools/html2canvas.js';

import { mapState, mapActions, mapMutations } from 'vuex';
export default {
	data() {
		return {
			//选择哪个优惠价格
			topOptThat: true,

			// 当前item
			itemObj: '',

			//是否为顶部
			isTopEvent: false,

			//相近数据
			similarityData: [],

			//弹出文本
			isShowText: false,

			//弹出图片
			isShowImg: false,

			//是否点击了copy
			isCopy: false,

			//二维码
			QRcode: '',

			//图片
			testImg: '',

			//生成出的图片
			

			//是否生成
			isSharImg: true
		};
	},
	// 监听页面滚动
	onPageScroll(v) {
		if (v.scrollTop > 600) {
			this.isTopEvent = true;
		} else {
			this.isTopEvent = false;
		}
	},
	filters: {
		goodsAfter(v) {
			return v.coupon_start_fee * 1 - v.coupon_amount * 1;
		}
	},
	computed: {
		...mapState({
			itemInfoObj: state => {
				state.itemInfo_idx.itemInfoObj;
			},
			itemTaoKouLing: state => state.itemInfo_idx.item_taokouling
		})
	},
	mounted() {
		

		
		//进行足迹功能攥写
		let trackAry = uni.getStorageSync('trackAry');

		if (trackAry) {
			// console.log(trackAry)
			trackAry = JSON.parse(uni.getStorageSync('trackAry'));
			// if(trackAry)
			let isExist = true;
			trackAry.forEach(el => {
				// 判断是否存在该id
				if (el.item_id == this.itemObj.item_id) {
					isExist = false;
				}
			});
			//如果不存在相同进行存储
			if (isExist) {
				console.log(trackAry.length);

				while (trackAry.length > 20) {
					console.log('j进来了2');
					trackAry.pop();
				}
				trackAry.push(this.itemObj);
				uni.setStorageSync('trackAry', JSON.stringify(trackAry));
			}
		} else {
			let tempAry = [];
			tempAry.push(this.itemObj);
			uni.setStorageSync('trackAry', JSON.stringify(tempAry));
		}

		console.log(JSON.parse(uni.getStorageSync('trackAry')));
	},
	onLoad(options) {
		this.itemObj = JSON.parse(uni.getStorageSync('itemObj'));
		// console.log(this.itemObj.category_name.search('/'));

		//拿到关键字进行发送请求
		if (this.itemObj.category_name.search('/') == '-1') {
			console.log(this.itemObj.category_name);
			this.reqSearchItemList({ kw: this.itemObj.category_name, active: 0 }).then(data => {
				this.similarityData = data.splice(0, 6);
				console.log(this.similarityData);
			});
		} else {
			let tempItem_name = this.itemObj.category_name.split('/');
			console.log(tempItem_name[0]);
			this.reqSearchItemList({ kw: tempItem_name[0], active: 0 }).then(data => {
				this.similarityData = data.splice(0, 6);
				console.log(this.similarityData);
			});
		}

		// console.log(this.itemObj.category_name)
		// console.log(this.item);
		this.reqItemInfoObj({ gid: this.itemObj.item_id }).then(data => {
			console.log(data);
		});
	},
	methods: {
		...mapActions(['reqItemInfoObj', 'reqSearchItemList', 'reqItemTaoKoLing']),
		...mapMutations(['setItem_TaoKoLing']),
		//点击弹出
		showTextClickEvent() {
			this.isShowText = true;

			this.setItem_TaoKoLing('');
		},

		testEvent() {
			console.log('12312132132131');
		},
		//打开图片分享  三步骤 1.生成二维码/ 2.生成canvas图片 3.渲染canvas图片
		showImgClickEvent() {
			this.isShowImg = true;
			let img = QR.createQrCodeImg(`http://localhost:8080/#/`, {
				size: parseInt(200)
			});
			this.QRcode = img;
			this.testImg = this.itemObj.pict_url;
			// img.onload= function(){

			// }
			var img1 = new Image();
			img1.onLoad = function() {
				console.log('1232');
			};

			// console.log(this.$refs.testimg2)
			// this.$refs.testimg2.onload({
			// 	console.log(1)
			// })

			var pic;
			var canvas2 = document.createElement('canvas');
			//将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
			canvas2.width = 586 * 2;
			canvas2.height = 906 * 2;
			canvas2.style.width = 586 + 'rpx';
			canvas2.style.height = 906 + 'rpx';
			// setTimeout(function(){
			// 	html2canvas(document.querySelector('#test'),{cavas:canvas2}).then(canvas => {
			// 		var url = canvas.toDataURL();
			// 		console.log(url);
			// 		// document.body.appendChild(canvas)
			// 	})
			// },20000)

			setTimeout(function() {
				html2canvas(document.querySelector('#test'), {
					allowTaint: true,
					cavas: canvas2,
					useCORS: true
				}).then(canvas => {
					var url = canvas.toDataURL();
					// this.shareImg=url
					// this.isSharImg=false
					let textImg = document.createElement('img');
					// textImg.className = 'shareimg';
					textImg.setAttribute('src', url);
				// textImg.style.width=100+"%"
				// textImg.style.height=100+"%"
					textImg.style.width=293+"px"
					textImg.style.height=453+"px"
					document.getElementById('showImgParent').appendChild(textImg);

					console.log(url);
					// document.body.appendChild(canvas)
				});
			}, 3000);

			// html2canvas(document.querySelector('#test'),{cavas:canvas2}).then(canvas => {
			// 	// document.body.appendChild(canvas)
			// 	var url = canvas.toDataURL(); //图片地址
			// 	console.log(url);
			// 	// document.body.appendChild(canvas);
			// 	// let textImg=document.createElement("img")
			// 	// textImg.setAttribute("src",url)
			// 	// document.body.appendChild(textImg);
			// });
		},
		//关闭图片
		closeImgClickEvnet() {
			this.isShowImg = false;
		},
		//关闭按钮
		closeTextClickEvent() {
			//关闭弹出框
			this.isShowText = false;

			//初始化是否点击了copy按钮
			this.isCopy = false;
		},
	
		//一键复制
		copyTextClickEvent() {
			if (!this.isCopy) {
				// 点击按钮进行淘口令转换
				this.reqItemTaoKoLing({ url: this.itemObj.coupon_click_url }).then(resp => {
					uni.setClipboardData({
						data: resp,
						success: function(data) {
							console.log('data');
						},
						fail: function(err) {},
						complete: function(res) {}
					});

					this.isCopy = true;
				});
			}
		},

		// 返回按钮
		goHomeClickEvent() {
			console.log('执行');
			uni.switchTab({
				url: '../index/index'
			});
		},
		//点击了哪个价格
		topClcikChangeEvent(v) {
			if (v) {
				this.topOptThat = v;
			} else {
				this.topOptThat = false;
			}
		},
		backClick() {
			uni.navigateBack({
				delta: 1,
				animationType: 'pop-out',
				animationDuration: 200
			});
		}
	},
	components: {
		clickUp,
		goodsitem
	}
};
</script>

<style lang="scss">
.page-item-info {
	.item-info-imgup {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000000000000;
		//生成出的图片
		.shareimg {
			position: absolute;
			margin: auto;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 586rpx;
			z-index: 555;
			height: 906rpx;
			& > image{
				width: 100%;
				height: 100%;
			}
		}

		// 弹出框图片的外部包裹
		.item-info-imgup-outer {
			width: 100vw;
			height: 100vh;
			image {
				width: 56rpx;
				height: 56rpx;
				position: absolute;
				left: 85%;
				top: 14%;
			}
			text {
				display: block;
				background: url('https://m.haoshsh.com/static/jwap/css/images/buy-msg.png') center top no-repeat;
				height: 140rpx;
				position: absolute;
				top: 85%;

				left: 10%;
				background-size: 100% auto;
				width: 80%;
			}
		}
		// 弹出框图片的内部包裹
		.item-info-imgup-img {
			position: absolute;
			margin: auto;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 586rpx;
			height: 906rpx;
			background-color: #ffffff;
			// overflow: hidden;

			//头部设置
			.imgup-img-header {
				width: 100%;
				border-radius: 5%;
				background: #ff5f6d; /* fallback for old browsers */
				background: -webkit-linear-gradient(to bottom, #ffc371, #ff5f6d); /* Chrome 10-25, Safari 5.1-6 */
				background: linear-gradient(to bottom, #ffc371, #ff5f6d); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

				view {
					height: 80rpx;
					font-size: 32rpx;
					margin: 0 auto;
					color: #ffffff;
					display: block;
					width: 90%;
					overflow: hidden;
					text-overflow: ellipsis;
					text-align: center;
					line-height: 80rpx;
					white-space: nowrap;
				}
			}

			//图片设置
			.imgup-img-img {
				width: 100%;
				height: 560rpx;
				margin-top: 20rpx;
				margin-bottom: 10rpx;
				text-align: center;
				image {
					width: 90%;
					height: 95%;
				}
			}

			//图片底部
			.imgup-img-bootom {
				width: 100%;
				view {
					width: 90%;
					margin: 0 auto;
					display: flex;
					justify-content: space-between;
					// overflow: hidden;
					.image-img-bootom-left {
						width: 60%;
						display: flex;
						flex-direction: column;
						font-size: 30rpx;

						& > view {
							width: 100%;
							height: 40rpx;
						}
						& > view:nth-child(1) {
							font-size: 35rpx;
							color: #f40497;
						}
						& > view:nth-child(2) {
							background-color: #fc4b63;
							height: 100rpx;
							border-radius: 5%;
							display: flex;
							align-items: center;

							& > text:nth-child(1) {
								color: #fb874e;
								font-size: 50rpx;
								width: 40%;
								text-align: center;
							}
							& > text:nth-child(2) {
								color: #ffffff;
								font-size: 45rpx;
								width: 60%;
								text-align: center;
							}
						}
						& > view:nth-child(3) {
							font-size: 28rpx;
							color: #5e5e5e;
						}
					}
					.imgup-img-bootom-right {
						width: 35%;
						height: 180rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
	//设置弹出框
	.item-info-popup {
		width: 100vw;
		height: 100vh;
		position: fixed;
		// background-color: blue;
		top: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 10;

		.i-i-p-text {
			position: absolute;
			width: 563rpx;
			height: 680rpx;
			border-radius: 20rpx;
			top: 0;
			left: 0;
			margin: auto;
			right: 0;
			bottom: 0;
			background-color: #ffffff;
			//设置弹出层头部
			.i-i-p-textHeader {
				width: 100%;
				text-align: center;
				font-size: 32rpx;
				line-height: 80rpx;
				height: 80rpx;
				background-color: #ff464e;
				color: #fff;
				border-top: #e4e4e4 2rpx solid;
				border-left: #e4e4e4 2rpx solid;
				border-right: #e4e4e4 2rpx solid;
				border-top-left-radius: 16rpx;
				border-top-right-radius: 16rpx;

				image {
					width: 60rpx;
					height: 60rpx;
					position: absolute;
					right: 5rpx;
					background: none;
					border: none;
				}
			}
			//title小窗口
			.i-i-p-textBody {
				width: 80%;
				padding: 20rpx;
				display: -webkit-box;
				height: 120rpx;
				margin: 0 auto;
				font-size: 30rpx;
				line-height: 1.4;
				color: #5e5e5e;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;

				border: 2px dashed #ffd4de;
				margin-top: 20rpx;
				background: #fff6f8;

				& > text:nth-child(2) {
					color: #f54d23;
				}
			}
			//优惠券部分
			.i-i-p-textDisc {
				width: 80%;
				padding: 20rpx;

				& > text:nth-child(1) {
					display: block;
					font-size: 36rpx;
					color: #f45454;
					font-weight: 500;
					padding-left: 20rpx;
				}

				& > text:nth-child(2) {
					display: block;
					font-size: 24rpx;
					color: #f90c49;
					padding-left: 20rpx;
				}

				& > text:nth-child(3) {
					display: block;
					font-size: 24rpx;
					color: #071efb;
					padding-left: 20rpx;
				}
			}
			//设置按钮
			.i-i-p-textBtn {
				width: 85%;
				margin: 0 auto;
				margin-top: 20rpx;
				color: #fff;
				text-align: center;
				padding: 30rpx 0;
				font: bold 32rpx/40rpx simsun;
				background: #f30;
				border-radius: 12rpx;
				border: 0px;
			}
			.btn-color {
				background-color: rgb(3, 144, 36);
			}
		}
	}

	width: 100vw;
	height: calc(100vh - 100rpx);
	.com-tab-footer {
		width: 100%;
		height: 100rpx;
	}
	//底部版权
	.item-info-footerCopyright {
		border-top: 10rpx solid #c0c0c0;
		text-align: center;
		height: 100rpx;
		font-size: 28rpx;
		color: #666;
	}
	// 头部导航

	.item-info {
		background: linear-gradient(138deg, #f40497, #f81131);
		width: 100%;
		.item-info-v {
			margin: 0 auto;
			width: 90%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;
			font-size: 35upx;
			color: #ffffff;
			height: 46px;
			image {
				width: 57upx;
				height: 57upx;
			}
			text {
				width: 80%;
			}
		}
	}
	// 设置详细内容
	.item-info-content {
		width: 100%;
		// 设置第一张图片
		// padding: 0 20rpx;
		.i-info-cont {
			margin: 0 auto;
			padding: 0;
			image {
				width: 750rpx;
				height: 750rpx;
			}
		}
		// 设置标题头
		.i-info-titele {
			box-sizing: border-box;
			font-size: 32rpx;
			height: 80rpx;
			color: #444;
			font-weight: bold;
			line-height: 40rpx;
			margin-top: 20rpx;
			overflow: hidden;
			background: #fff;
			width: 96%;
			margin: 0 auto;
			max-height: 1300rpx;
		}
		// 设置价格栏
		.i-info-price {
			width: 96%;
			margin: 0 auto;
			height: 50rpx;
			margin-top: 15rpx;

			& > text:nth-child(1) {
				font-size: 36rpx;
				color: #f45454;
				margin-right: 16rpx;
				font-weight: 500;
				font-family: arial;
			}
			& > text:nth-child(2) {
				font-size: 24rpx;
				color: #555555;
				//删除线
				text-decoration: line-through;
				padding-right: 20rpx;
			}
		}
		//设置领卷优惠
		.i-info-miduile {
			width: 96%;
			margin: 0 auto;
			margin-top: 15rpx;
			border-bottom: 2rpx solid #f5f5f5;
			color: #444;
			text-align: left;
			font-size: 28rpx;
			line-height: 40rpx;
			font-family: Sans-Serif;
			letter-spacing: 4rpx;
			text {
				color: #fc6f03;
			}
		}
		//推荐理由
		.i-info-recommend {
			width: 96%;
			margin: 0 auto;
			margin-top: 15rpx;
			.i-info-recoOne {
				& > text:nth-child(1) {
					width: 96%;
					margin: 0 auto;
					display: block;
					font-weight: normal;
					color: #f8285c;
					text-align: center;
					border-bottom: 2rpx dashed #ffd4de;
					background: #fff6f8;
					opacity: 0.8;
					padding: 1% 0;
					font-size: 32rpx;
				}

				& > text:nth-child(2) {
					display: block;
					width: 96%;
					margin: 0 auto;
					font-size: 28rpx;
					color: #5e5e5e;
				}
			}

			.i-info-recoTwo {
				width: 96%;
				margin: 0 auto;
				margin-top: 15rpx;
				& > text:nth-child(1) {
					width: 96%;
					margin: 0 auto;
					display: block;
					font-weight: normal;
					color: #f8285c;
					text-align: center;
					border-bottom: 2rpx dashed #ffd4de;
					background: #fff6f8;
					opacity: 0.8;
					padding: 1% 0;
					font-size: 32rpx;
				}
				view {
					width: 96%;
					margin: 0 auto;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 10rpx;

					view {
						display: flex;
						flex-direction: column;
						height: 100rpx;
						justify-content: space-between;
						color: #5e5e5e;
						font-size: 28rpx;
						& > text:nth-child(1) {
							display: block;
							width: 56rpx;
							height: 56rpx;
							margin: 0 auto;
							background-size: 440rpx auto !important;
						}
					}
				}
			}
		}

		//设置查看
		.com-tabs-price {
			margin-top: 15rpx;
			margin-bottom: 15rpx;
			display: flex;
			width: 100%;
			background-color: #ffffff;
			font-size: 30rpx;
			color: #5e5e5e;
			view {
				flex: 1;
				// background-color: red;
				height: 68rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.opt-style-price {
				border-bottom: 6rpx solid #f8285c;
				font-weight: 800;
			}
		}

		//设置当前渲染图片
		.com-tabs-showImg {
			width: 100%;
			view {
				width: 100%;
				border-bottom: 5rpx solid #c0c0c0;
			}
			.com-tabs-infoImg {
				width: 750rpx;
				height: 728rpx;
			}
		}
	}

	//设置tabbar
	.i-info-tabbr {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		z-index: 100000;
		width: 100vw;
		height: 100rpx;

		.i-info-tabb-child {
			display: flex;
			align-items: center;
			width: 100vw;
			& > view {
				display: inline-block;
			}
			& > view:nth-child(1),
			view:nth-child(2),
			view:nth-child(3) {
				width: 100rpx;
				text-align: center;
				height: 100%;
				display: flex;
				flex-direction: column;
				color: #5e5e5e;
				font-size: 30rpx;
				image {
					margin: 0 auto;
					width: 45rpx;
					height: 42rpx;
				}
			}
			.i-info-a {
				a {
					text-decoration: none;
					color: #ffffff;
				}
			}
			& > view:nth-child(4),
			view:nth-child(5) {
				width: 224rpx;
				height: 110rpx;
				text-align: center;
				line-height: 100rpx;
				font-size: 30rpx;
				color: #ffffff;
				font-weight: normal;
				letter-spacing: 0px;
			}
			& > view:nth-child(4) {
				background: #fb874e;
			}
			& > view:nth-child(5) {
				width: 236rpx;
				height: 110rpx;
				background: #f54d23;
				line-height: 100rpx;
			}
		}
	}
}
</style>
